<template>
  <view class="">
    <view :style="{ background: bg }" class="my-head">
      <view class=""></view>
      <!-- <pick-regions @getRegion="handleGetRegion" :defaultRegion="defaultRegion">
				<view class="fl-t  address" :style="{'color':color}">{{city}}
					<u-icon name="arrow-down" size="22" :color="color" @click="selCity"></u-icon>
				</view>
			</pick-regions> -->
      <view class="name" :style="{ color: color }"> 推荐人才</view>
      <view class="head-right fl-t">
        <view class="icon-exchange">
          <image
            src="/static/recruit/index/zh.png"
            mode=""
            style="width: 36rpx; height: 36rpx;"
            @click="switchPattern(pattern)"
          ></image>
          <!-- <image
            v-show="!activation"
            src="/static/recruit/index/zh.png"
            mode=""
            style="width: 36rpx; height: 36rpx"
            @click="switchPattern(pattern)"
          ></image> -->
        </view>
        <image
          src="/static/recruit/index/search.png"
          mode=""
          style="width: 40rpx; height: 40rpx"
          @click="goSearch()"
        ></image>
      </view>
    </view>
    <view class="occupy"></view>
  </view>
</template>

<script>
import pickRegions from "@/pages/component/pick-regions/pick-regions.vue";
export default {
  props: {
    bg: {
      type: String,
      default: "#1684fc",
    },
    region: {
      //定位
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default: "#fff",
    },
  },
  data() {
    return {
      selRegion: this.region, //定位或者选择的省市区
      city: "", //显示的市区
      pattern: true, //展示模式  true默认  false切换
      activation: false, //ture  视频  推荐
      filter: ["重庆市", "上海市", "天津市", "北京市"],
      defaultRegion: ["重庆市", "市辖区", "全部"],
      isSel: false, //是否是选择
    };
  },
  onLoad(o) {},
  components: {
    pickRegions,
  },
  computed: {},
  onShow() {},
  // 初次渲染
  onReady() {},
  watch: {
    region: {
      handler(region, oldRegion) {
        this.selRegion = region;
      },
      immediate: true,
    },
    selRegion: {
      handler(selRegion, oldRegion) {
        if (selRegion.length == 1) {
          this.city = selRegion[0];
          this.$emit("locationFilter", this.city);
          return;
        }
        if (selRegion.length == 0) {
          this.city = "";
          this.$emit("locationFilter", "");
          return;
        }
        if (this.isSel) {
          if (this.filter.includes(selRegion[0])) {
            //存在
            if (selRegion[2] == "全部") {
              this.city = selRegion[0];
              this.$emit("locationFilter", selRegion[0]);
            } else {
              this.city = selRegion[2];
              this.$emit("locationFilter", selRegion[2]);
            }
          } else {
            if (selRegion[2] == "全部") {
              this.city = selRegion[1];
              this.$emit("locationFilter", selRegion[1]);
            } else {
              this.city = selRegion[2];
              this.$emit("locationFilter", selRegion[2]);
            }
          }
        } else {
          if (this.filter.includes(selRegion[0].name)) {
            //存在
            this.city = selRegion[0];
            this.defaultRegion = [selRegion[0], "", selRegion[2]];
            this.$emit("locationFilter", selRegion[0]);
          } else {
            this.city = selRegion[1];
            this.defaultRegion = selRegion;
            this.$emit("locationFilter", selRegion[1]);
          }
        }
        //数据传出去
      },
      immediate: false,
    },
  },
  methods: {
    goSearch() {
      console.log("搜索");
      uni.navigateTo({
        url: "/pages/views/packageA/type-recruit/search/search",
      });
    },

    handleGetRegion(e) {
      //获取到的数据
      console.log(e);
      this.isSel = true;
      this.selRegion = e;
    },

    selCity() {
      this.$emit("selCity");
    },
    switchPattern(pattern) {
      // console.log("切换")
      this.pattern = !pattern;
      this.$emit("updatePattern", this.pattern);
    },
  },
};
</script>

<style lang="scss" scoped>
.occupy {
  height: calc(88rpx + var(--status-bar-height));
}

.my-head {
  position: fixed;
  top: 0;
  width: 100%;
  // padding: var(--status-bar-height) 50rpx 0 30rpx;
  padding-top: var(--status-bar-height);
  height: calc(88rpx + var(--status-bar-height));
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  z-index: 999;

  .address {
    font-size: 28rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: bold;
  }

  .name {
    font-size: 32rpx;
    font-family: PingFang-SC-Heavy;
    font-weight: 800;
    color: #ffffff;
    position: fixed;
    // top: 30rpx;
    // left: 0;
    width: 100%;
    // height: 100%;
    line-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    // view {
    // 	position: absolute;
    // 	left: 50%;
    // 	bottom: -10rpx;
    // 	height: 4rpx;
    // 	width: 60rpx;
    // 	transform: translate(-50%, 0);
    // 	border-radius: 2rpx;

    // }
  }

  .fontSize {
    font-size: 36rpx;
  }

  .icon-exchange {
    padding-top: 10rpx;
    margin-right: 18rpx;
  }

  .head-right {
    display: flex;
    justify-content: center;
    padding-right: 58rpx;
  }
}
</style>
